/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";
@import "components/ui.selectmenu";
@import "vendor/_xflex.scss";


.ic-Layout-contentMain {
  padding: 0;
}

// em units are required for the height, positioning and padding
// on the header bar so it will play nice when a user changes
// their browser font size to either small or very large

$gradebook_header_height: 3.5em;

#gradebook_header_container {
  height: $gradebook_header_height;
  overflow: hidden;
}

#speed_grader_loading {
  padding: 5px;
  @include fontSize(24px);
}

#gradebook_header {
  background-color: $ic-brand-global-nav-bgd;
  color: $ic-brand-global-nav-menu-item__text-color;

  padding: 0.375em 0.75em;
  @include fontSize(11px);
  min-width: 960px;
  .ui-icon {
    background-image: $iconsActive;
  }
  a {
    color: $ic-brand-global-nav-menu-item__text-color;
  }

  #combo_box_container {
    text-align: left;
    background: transparent;
    select {
      width: 230px;
      z-index: 100;
    }
  }
}
.subheadContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.subheadContent--flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 2;
  min-width: 0;
  padding-right: $ic-sp;
  overflow: hidden;
}
// little trick to make the icon-font and the icon svg match in size
$icon-size: 1.4rem;

.gradebookActions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-right: $ic-sp;
  flex-shrink: 0;

  // sizes the icon font
  .gradebookActions__Button {
    @include overwrite-default-icon-size($icon-size);
    margin-right: $ic-sp/3;
    color: $ic-brand-global-nav-ic-icon-svg-fill;
  }

  // sizes the svg
  .gradebookActions__Svg {
    width: $icon-size;
    height: $icon-size;
    display: block; // removes extra inline spacing
  }
}

.assignmentDetails {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding-left: 20px;
  border-left: 1px dotted $ic-brand-global-nav-menu-item__text-color;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignmentDetails__Title {
  flex: 1;
  min-width: 0;
  @include fontSize(16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.assignmentDetails__Info{
  @include fontSize(11px);
  font-weight: $ic-font-weight;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.subheadContent--flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  padding-left: $ic-sp;
}
.statsMetric {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  align-self: flex-end;
  padding-right: $ic-sp;
  border-right: 1px dotted $ic-brand-global-nav-menu-item__text-color;
}
.statsMetric__Item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  margin-right: $ic-sp*2;
  &:last-of-type {
    margin-right: $ic-sp;
  }
}
.statsMetric__Item-value {
  @include fontSize(16px);
}
.statsMetric__Item-label {
  @include fontSize(11px);
  font-weight: $ic-font-weight;
}
.studentSelection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-left: $ic-sp;
}
.gradebookMoveToNext {
  padding: 0 $ic-sp;
  i {
    color: $ic-brand-global-nav-menu-item__text-color;
  }
}
.gradebookAvatar {
  height: 30px;
  max-width: 30px;
  border-radius: 30px; //match size of avatar width
  overflow: hidden;
  margin-right: $ic-sp;
}
#eg-canvas-logo {
  background: url(/images/canvas/header_canvas_logo.png) no-repeat;
  position: absolute;
  top: 7px;
  right: 7px;
  height: 26px;
  width: 135px;
  display: block;
}

#settings_link, #mute_link {
  position: relative;
  .ui-icon {
    display: inline-block;
    vertical-align: top;
  }
}

.ic-Layout-columns {
  position: static;
  z-index: 1;
}

#full_width_container {
  position: absolute;
  top: $gradebook_header_height + 0.0625em;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 960px;
  &.with_moderation_tabs {
    top: $gradebook_header_height * 2;
  }
  &.with_enrollment_notice {
    top: $gradebook_header_height + 3.3625em;
  }
}

.full_width {
  #left_side {
    width: 100%;
    margin-left: -8px;
    #left_side_inner {
      margin-left: 8px;
    }
  }
  #right_side {
    width: 7px;
  }
  #rightside_inner {
    display: none;
  }
}

.full_height {
  height: 100%;
  overflow-x: scroll;
}

.media_comments_visible {
  #left_side {
    width: 100%;
    margin-left: -330px;
    #left_side_inner {
      margin-left: 330px;
    }
  }
  #right_side {
    width: 329px;
  }
}

#enrollment_inactive_notice, #enrollment_concluded_notice, #closed_gp_notice {
  width: 100%;
  border-bottom: 1px solid $ic-border-light;
  border-radius: 0;
  text-align: center;
}

#moderation_bar {
  display: none;
  width: 100%;
  border-bottom: 1px solid $ic-border-light;

  #moderation_bar_content {
    display: flex;
    align-items: center;

    #new_mark_container {
      padding-left: 5px;
    }
  }
}

#moderation_tabs {
  #dummy_container {
    height: 0px;
    padding: 0px;
  }
  ul {
    background: $white;
    height: $gradebook_header_height - 0.0625em;
    li {
      height: $gradebook_header_height;
      min-width: 275px;
      &.ui-state-active {
        background: $ic-bg-light-neutral;
        button {
          float: right;
          margin: 6px 14px;
          display: inline-block;
        }
        &.selected button, &.pending button {
          display: none;
        }
      }
      &.ui-state-focus .mark_title {
        text-decoration: underline;
      }
      &.selected .selected_icon {
        display: inline-block;
        color: $ic-brand-primary;
        padding-right: 6px;
      }
      a {
        padding: 14px 12px;
        text-decoration: none;
        span {
          padding: 0 8px;
          &.mark_title {
            font-weight: bold;
          }
        }
      }
      .selected_icon, button {
        display: none;
      }
    }
    #new_mark_container {
      height: $gradebook_header_height - 0.125em;
      border: none;
    }
    #new_mark_dropdown_link {
      width: 150px;
    }
  }
}

#left_side {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 25%;
  #submissions_container, #left_side_inner, iframe, #doc_preview_holder, #iframe_holder, #resize_overlay {
    height: 100%;
    width: 100%;
    border: 0 none;
  }
  #resize_overlay {
    position: relative;
    top: -100%;
    z-index: 1;
  }
  h3, .h3 {
    margin: 0;
    padding: 2em;
    text-align: center;
    .subheader {
      display: block;
      font-size: 0.75em;
      line-height: 2em;
    }
  }
}

#width_resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #bbb url("/images/splitpane_handle-ew.gif") no-repeat scroll 50% 50%;
  cursor: pointer;
  width: 7px;
  border-right: 1px solid #838383;
  z-index: 2;
  &.highlight {
    background-color: #FBEC88;
  }
}

#speedgrader_iframe {
  display: block;
}

#right_side {
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  @include fontSize(14px);

  #rubric_summary_container {
    margin-top: $ic-sp;
  }

  #rubric_assessments_list_and_edit_button_holder {
    .button-container {
      display: inline-block;
    }
  }
  div.comment {
    padding: 8px;
    @include fontSize(14px);
    border-top: 1px dotted $ic-border-light;
    background: $ic-color-light;
    &:first-of-type {
      border-top: none;
    }
    &.draft {
      background: lighten($ic-color-alert, 55%);
    }
    span.draft-marker {
      color: $red;
      padding-right: 0.5em;
      flex: none;
    }
    div.comment_flex {
      display: flex;
      flex-direction: row;
      margin-bottom: 0.5em;
    }
    span.comment {
      flex: auto;
    }
    .comment_citation {
      @include fontSize(12px);
      text-align: right;
    }
    .delete_comment_link, .submit_comment_button {
      flex: none;
      height: 24px;
      margin-left: 0.5em;
      @if $use_high_contrast {
        color: lighten($ic-color-dark, 12%);
      }
      @else {
        color: lighten($ic-color-dark, 25%);
      }
      &:hover, &:focus {
        color: $ic-font-color-dark;
      }
    }
  }
  h2, .h2 {
    @include fontSize(14px);
    font-weight: bold;
  }
  .content_box {
    padding: $ic-sp*2;
    background: $ic-color-light;
    border-bottom: 1px solid $gray-lighter;
  }
  #rightside_inner {
    @extend %flex-1;
    overflow-y: auto;
    position: relative;
  }
  #not_gradeable_message {
    padding: 20px;
    font-size: 1.2em;
    display: none;
  }
  .submission-late-pill,
  .submission-missing-pill {
    font-size: 1rem;
  }
}

.right_side_content {
  @extend %flex;
  @extend %flex-column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  right: 0;
}

#rubric_full {
  #rubric_full_resizer #rubric_full_resizer_handle {
    position: absolute;
    top: 50%;
    left: 0px;
    background: transparent url("/images/splitpane_handle-ew.gif") no-repeat scroll 50% 50%;
    cursor: pointer;
    height: 20px;
    width: 7px;
  }
  a.big_link {
    display: none;
  }
  table.rubric {
    margin-top: 0;
  }
}
#submission_files_container {
  padding: $ic-sp 0;
}
#comments {
  overflow-y: auto;
  .comment {
    .avatar {
      height: 24px;
      max-width: 24px;
      flex-shrink: 5;
      margin-right: 12px;
    }
  }
}

#add_a_comment {

  #media_media_recording {
    margin: 0 -2px;
  }
  .hidden {
    display: none;
  }
  #teachers_and_submitter_will_be_notified {
    color: #888;
    @include fontSize(10px);
  }

  .attach_things {
    list-style: none;

    //Chrome has a nice bug where clicking on block element
    //inside an inline element will force the inline element
    //to keep the :active pseudo class.
    //this causes tooltips to stay open since our tooltips
    //show if the tooltip element has the :active pseudo class
    //a bug has been filed at https://code.google.com/p/chromium/issues/detail?id=391254
    .tooltip .tooltip_wrap {
      display: none;
    }
    .tooltip:hover .tooltip_wrap {
      display: block;
    }
    /////// END: fix for chrome bug.
    .prompt {
      font-weight: bold;
      line-height: 24px;
      padding-right: 4px;
      float: left;
    }
    button {
      float: left;
      margin-right: 5px;
    }
  }
  #comment_attachments {
    padding: $ic-sp/2 0;
    display: block;
    a {
      float: right;
    }
  }
}

body .ui-selectmenu-dropdown {
  border-radius: 0;
  color: $ic-brand-global-nav-ic-icon-svg-fill !important;
  height: 1.3125em;
  background-color: transparent;;
  background-image: none;
  border: none;
  font-weight: normal !important;
  &:hover {
    text-decoration: none !important;
  }
  .ui-selectmenu-status {
    @include fontSize(14px);
    padding: 0 20px 0;
    padding: 0 0 0 20px;
    margin: 0 20px 0 0;
    height: 1.3125em;
    .ui-icon {
      top: 3px !important;
      &:after {
        content: "\f15c";
      }
    }
  }
  .ui-selectmenu-icon {
    width: 17px;
    height: 22px;
    border: 0;
    background-image: none;
    background-position: 0 0;
    cursor: pointer;
    border: none;
    position: absolute;
    top: -1px;
    right: -1px;
    margin: 0;
  }
}

body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .ui-selectmenu-icon {
  background-position: (-17px) 0;
  color: $ic-brand-global-nav-ic-icon-svg-fill;
;

}

#students_selectmenu-menu {
  max-height: 400px;
  margin-top: 14px; //to get the dropdown line items to line up with the bottom of the header bar

  ul {
    margin-top: 14px; //needed to position the dropdown to fall at the exact height of the headerbar
    border-color: $ic-border-dark;
  }

  li {
    padding: 8px 6px;
    margin-bottom: 0;
    border-bottom: 1px solid $ic-border-light;

    &:last-of-type {
      border-bottom: none;
    }

    .ui-selectmenu-item-header {
      font-weight: normal;
    }
  }
  .ui-state-hover {
    text-decoration: underline;
    background-color: $ic-bg-light-neutral;
    border-bottom: 1px solid $ic-border-light;
  }
}

// override the status icon color for the first item in the dropdown
#students_selectmenu-button .ui-selectmenu-item-icon.speedgrader-selectmenu-icon:first-of-type {
  color: $ic-brand-global-nav-ic-icon-svg-fill;
}

.ui-selectmenu-item-icon {
  top: 6px !important;
  margin-top: 0 !important;
  left: -3px;
}

.ui-selectmenu-item-icon.speedgrader-selectmenu-icon {
  position: absolute;
  left: 0px;
  .ui-selectmenu-status & {
    top: (-0.5px) !important;
    left: 4px;
  }
  .not_graded & {
    font-size: 1.7em;
    color: $orange;
  }
  .resubmitted & {
    font-size: 1.7em;
    color: $orange;
  }
  .not_gradeable & {
    font-size: 1.7em;
    color: lighten($ic-color-dark, 50%);
  }
  .graded & {
    color: $ic-color-success;
    i {
      width: 14px;
      height: 14px;

      &:before {
        font-size: 14px;
      }
    }
  }
}

.ui-selectmenu-item-header {
  color: $ic-font-color-dark;

  .not_submitted & {
    @if $use_high_contrast {
      color: lighten($ic-color-dark, 20%);
    }
    @else {
      color: lighten($ic-color-dark, 50%);
    }
  }
  .ui-selectmenu-status & {
    margin-top: 1px;
    color: $ic-brand-global-nav-menu-item__text-color;
  }
}

.speedgrader-selectmenu-icon + .ui-selectmenu-item-header {
  margin-left: 5px;
}

.turnitin_info {
  margin-top: 3px;
  border-top: 1px solid #999999;
  padding: 3px 0;
}

#submission_details {
  border-bottom: 1px solid $ic-border-light;
  a {
    @include fontSize(14px);
  }
  .on_time {
    color: #004B00;
  }
  .late {
    color: #d12f19;
    font-weight: bold;
    white-space: nowrap;
  }
  #submission_late_notice {
    color: #d12f19;
    font-weight: bold;
  }
  #submission_not_newest_notice {
    color: $orange;
    font-weight: bold;
    padding: $ic-sp/2 0;
  }
  .submission_attachment_viewed_at {
    display: inline;
  }
  .see-all-attempts {
    display: block;
    font-weight: bold;
  }
  select {
    width: 99%;
  }
  label {
    font-weight: bold;
  }
  .labelText--not-bold {
    font-weight: normal;
  }
  #submission_files_list {
    overflow: hidden;
    .submission-file {
      position: relative;
      padding: $ic-sp/2 0;
      .turnitin_score_container {
        float: left;
        margin-right: $ic-sp;
        margin-left: 0;
      }
      .turnitin_score_container_caret {
        display: none;
      }
      .turnitin_similarity_score {
        @include fontSize(12px);
        text-align: center;
        width: 34px;
        &.submission_error, &.submission_pending {
          padding: 1px;
        }
        &:hover {
          @include fontSize(12px);
        }
      }
      .submission-file-download {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        right: 1px;
        overflow: hidden;
      }
      .display_name {
        display: block;
        margin-right: 28px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .submission-file-selected {
      background: #DCECFB url("/images/pass.png") no-repeat center left;
      font-weight: bold;
    }
  }
}

/// this is for a sub-dropdown menu for course sections
#section-menu {
  position: absolute;
  overflow: visible;
  border: 1px solid $ic-border-dark;
  margin-top: 14px; // to make it align properly with the student select dropdown
  #section-menu-link {
    display: block;
    height: 19px;
    margin-left: 8px;
    padding-left: 29px;
    background: url("/images/arrow_left.png") no-repeat center left;
    overflow: hidden;
    white-space: nowrap;
    color: $ic-font-color-dark;
    font-weight: bold;
    @include fontSize(12px);
  }
  #section_currently_showing {
    display: inline;
  }
  ul {
    position: absolute;
    top:0;
    left: -200px;
    width: 200px;
    background-color: $ic-color-light;
    padding: 0;
    border-radius: 0;
    li {
      margin: 0;
      @include fontSize(12px);
      &:first-of-type {
        border-bottom: 1px solid $ic-border-light;
      }

      a {
        line-height: 24px;
        color: $ic-font-color-dark;
        &.selected {
          font-weight: bold;
        }
        &:hover {
          background: $ic-bg-light-neutral;
          text-decoration: underline;
        }
        &.ui-state-focus {
          background: $ic-bg-light-neutral;
        }
      }
    }
  }
}

.speedgrader_alert {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  text-align: center;
}

.dialog_button {
  height: 35px;
}

#record_button div {
  margin: 0 10px;
  width: 15px;
  height: 15px;
}

#record_button[recording=false] div {
  background-color: $red;
  border-radius: 15px;
}

#record_button[recording=true] div {
  background-color: $black;
}

#text_preview {
  width: 420px;
  height: 100px;
  border: 1px solid $borderColor;
}

#interim_results {
  color: $ic-color-success;
}

.no-close {
  .ui-dialog-titlebar-close {
    display: none;
  }
}

#grading-box-extended {
  width: 35px;
  margin-bottom: 0;
  &.pass_fail_grading_type {
    width: 105px;
  }
}

#deduction-box {
  display: flex;
  margin: 0 .25em;

  &.hidden {
    display: none;
  }
  .deduction-box-labels {
    margin-right: .5em;
  }
  .deduction-box-values {
    flex: 1
  }
  .error {
    color: $ic-color-danger;
    margin-right: 1em;
  }
  .bold {
    font-weight: bold;
  }
}

#settings_form input[type=checkbox][disabled] + label {
  opacity: 0.5;
}

#settings_form .icon-info {
  vertical-align: -4px;
  color: $ic-link-color;
}

.gradebook-icon-link:hover {
  text-decoration: none;
}
